<template>
    <div class="materialContent">
        <div class="materialContentComponent">
            <div class="input-content">
                <InputContent
                    ref="inputContentRef"
                    :disabled="props.disabled"
                    :max-length="props.maxLength"
                    :input-disabled="props.inputDisabled"
                    :tabs="props.inputContentTabs"
                    :tabs-text="props.inputContentTabsText"
                    :content="props.inputContentData"
                    :placeholder="props.placeholder"
                    @change="changeInputText" />
            </div>
            <div class="material-content">
                <MaterialComponent
                    ref="materialComponentRef"
                    :disabled="props.disabled"
                    :max-num="props.maxNum"
                    :tabs="materialTabs"
                    :material-data="props.materialContentData"
                    :scene-value="props.sceneValue"
                    @change="changeMaterialList" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, withDefaults, watch } from 'vue';
import InputContent from './components/InputContent.vue';
import MaterialComponent from './components/MaterialComponent.vue';

defineOptions({
    name: 'ZwUnityMaterialContent'
});

interface Props {
    /** 输入框tab，1-展示选择文本 2-展示选择表情 */
    inputContentTabs?: Array<any>;
    /** 输入框自定义文案插入内容 */
    inputContentTabsText?: Array<any>;
    /** 输入框placeholder */
    placeholder?: string;
    /** 文本输入框最近长度 */
    maxLength?: number;
    /** 文本输入内容回显使用 */
    inputContentData?: string;
    /** 输入框是否禁用 */
    inputDisabled?: boolean;
    /** 素材展示tabs内容 */
    showMaterialTabs?: Array<any>;
    /** 素材最大数量 */
    maxNum?: number;
    /** 素材选择内容回显使用 */
    materialContentData?: Array<any>;
    /** 素材是否禁用 */
    materialDisabled?: boolean;
    /** 整个素材是否禁用 */
    disabled?: boolean;
    /** 场景值 */
    sceneValue?: string;
}

const props = withDefaults(defineProps<Props>(), {
    inputContentTabs: () => [1, 2],
    inputContentTabsText: () => [],
    placeholder: '请输入消息',
    maxLength: 1000,
    inputContentData: '',
    inputDisabled: false,
    showMaterialTabs: () => [1, 2, 3, 4, 5, 6, 7, 9, 10, 11],
    maxNum: 9,
    materialContentData: () => [],
    materialDisabled: false,
    disabled: false,
    sceneValue: ''
});

const emit = defineEmits(['change', 'changeInputText', 'changeMaterialList']);

/**
 * 素材弹框展示tabs
 */
const materialTabs = computed(() => {
    if (props.sceneValue == 'friend') {
        return [1, 2, 3];
    } else {
        return props.showMaterialTabs;
    }
});

/** input ref */
const inputContentRef = ref();

/** material ref */
const materialComponentRef = ref();

/** 输入框内容 */
const inputInfo = ref<any>('');

/** 素材内容 */
const materialInfo = ref<any>([]);

/**
 * 清除input输入框
 */
const clearInput = () => {
    inputContentRef.value.clearInput();
};

/**
 * 清除选中素材内容
 */
const clearMaterial = () => {
    materialComponentRef.value.clearMaterial();
};

/**
 * 输入框内容改变
 * @param val
 */
const changeInputText = (val: any) => {
    inputInfo.value = val || '';
    change();
    emit('changeInputText', val);
};

/**
 * 素材内容改变
 * @param val
 */
const changeMaterialList = (val: any = []) => {
    materialInfo.value = val;
    change();
    emit('changeMaterialList', val);
};

/**
 * 输入框内容和素材内容改变
 * @param val
 */
const change = () => {
    const params = {
        content: inputInfo.value,
        materialInfo: materialInfo.value
    };
    emit('change', params);
};

onMounted(() => {});

onUnmounted(() => {});

defineExpose({
    clearInput,
    clearMaterial
});
</script>

<style lang="scss" scoped>
.materialContent {
    display: flex;

    // height: 600px;

    .materialContentComponent {
        min-width: 200px;
        max-width: 600px;
        flex: 1;
        box-sizing: border-box;

        .input-content {
        }

        .material-content {
        }
    }

    .extra-operation {
        margin: 0 10px;
        display: flex;
        flex-direction: column;

        .btn {
            font-size: 12px;
            color: #ff6b00;
            line-height: 2;
            margin-bottom: 8px;

            &:hover {
                cursor: pointer;
                color: #f99a38;
            }
        }
    }
}
</style>
